import { SystemUserQueryDto, SystemUserResultDto, useSystemUserQuery } from '@/gql'
import { PageContainer, ProTable } from '@ant-design/pro-components'

import React, { useState } from 'react'

const SystemRole: React.FC = () => {
  const [current, setCurrent] = useState(1)
  const [size, setSize] = useState(10)
  const [queryParams, setQueryParams] = useState<SystemUserQueryDto>({})
  const { data: systemUserData } = useSystemUserQuery({
    variables: { pageDTO: { current: current, size: size }, dto: queryParams },
  })

  console.log(systemUserData)

  const columns = [
    {
      title: '用户姓名',
      dataIndex: 'userName',
      key: 'userName',
    },
    {
      title: '电话',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
    },
  ]

  const pageSizeChange = (current, size) => {
    setSize(size)
  }

  return (
    <>
      <PageContainer title="用户管理">
        <ProTable<SystemUserResultDto>
          columns={columns}
          request={(params) => {
            console.log(params)
            let state = {}
            params.userName !== '' && params.userName !== undefined ? (state.userName = params.userName) : ''
            params.phone !== '' && params.phone !== undefined ? (state.phone = params.phone) : ''
            // if (params.userName !== '' && params.userName !== undefined) {
            //   state.userName = params.userName
            // }
            // if (params.phone !== '' && params.phone !== undefined) {
            //   state.phone = params.phone
            // }

            setQueryParams(state)
          }}
          dataSource={systemUserData?.systemUserPage?.records as SystemUserResultDto[]}
          pagination={{
            showTotal: () => `共 ${systemUserData?.systemUserPage?.total} 条`,
            total: systemUserData?.systemUserPage?.total,
            onChange: setCurrent, // 页码变化回调函数
            current: systemUserData?.systemUserPage?.current,
            showSizeChanger: true,
            onShowSizeChange: pageSizeChange, //页面大小变化回调函数
            defaultPageSize: 10,
          }}
        />
      </PageContainer>
    </>
  )
}

export default SystemRole
